<template>
  <view class="information-list">
    <u-list @scrolltolower="scrolltolower">
      <u-list-item v-for="(item, index) in informationArr" :key="index">
        <view class="information-item" @click="toDetail(item.id)">
          <view class="avatar-information">
            <view class="information-item-avatar">
              <u-avatar size="80" :src="item.avatar" class="avatar" shape="square"></u-avatar>
              <img :src="vipIcon" class="vipIcon" v-show="item.isVip == 1" alt="" />
            </view>
            <view class="information-detail">
              <view class="name">{{ item.name }}</view>
              <view class="age">
                {{ item.age }}
                <img :src="lineImg" class="line" alt="" />
                {{ item.degree }}
                <img :src="lineImg" class="line" alt="" />
                {{ item.height }}
              </view>
              <view class="address">
                <view class="box">{{ item.address }}</view>
                <view class="box">{{ item.Occupation }}</view>
                <view class="box">{{ item.Salary }}</view>
              </view>
              <view class="life-photo">
                <u-avatar size="34" :src="item.avatar" shape="square"></u-avatar>
              </view>
            </view>
          </view>

          <view class="electrocardiogramImg">
            <img class="img" :src="electrocardiogramImg" alt="" />
            {{ item.intention }}
          </view>
        </view>
      </u-list-item>
    </u-list>
  </view>
</template>

<script>
export default {
  name: "personalInformation",
  data() {
    return {
      lineImg: require("images/line.png"),
      electrocardiogramImg: require("images/electrocardiogram.png"),
      vipIcon: require("images/vip.png"),
      informationArr: [
        {
          avatar: "https://x37-img.xindongyun.cn/h5u518981de4b0a2021043002032061086voolll.jpg?imageView2/1/w/300/q/85",
          name: "Queenie",
          age: "26岁",
          degree: "本科",
          height: "163cm",
          address: "武汉市",
          Occupation: "教师",
          Salary: "4000-5000元",
          intention: "寻找年龄25-35岁, 身高174-199, 收入不限的男士",
          isVip: 1
        }
      ]
    };
  },
  created() {
    this.getData();
  },
  methods: {
    scrolltolower() {
      this.loadmore();
    },
    // 页签的类型type
    getData(type) {
      this.$emit("dataInit");
      setTimeout(() => {
        for (let index = 0; index < 10; index++) {
          this.informationArr.push(this.informationArr[0]);
          this.$emit("dataComplete");
        }
      }, 300);
    },
    toDetail(id) {
      uni.navigateTo({
        url: "/pages/member-details/member-details?id=" + id
      });
    },
    // 触底加载下一页
    loadmore() {
      console.log("上拉加载下一页");
    }
  }
};
</script>
<style lang="scss" scoped>
.information-list {
  background-color: #f4f5f6;
  padding: 0 36rpx;
  /deep/ .u-list {
    height: auto !important;
  }

  .information-item {
    background: #ffffff;
    margin-top: 20rpx;
    border-radius: 20rpx;
    padding: 30rpx;
    .avatar-information {
      display: flex;
      .information-item-avatar {
        margin-right: 22rpx;
        position: relative;
        .vipIcon {
          width: 100rpx;
          height: 40rpx;
          position: absolute;
          top: 10rpx;
          left: 10rpx;
        }
      }
      .information-detail {
        .name {
          font-weight: 700;
          color: #303133;
        }
        .address {
          margin-bottom: 20rpx;
          display: flex;
          margin-top: 10rpx;
          .box {
            color: rgb(206, 120, 164);
            padding: 4rpx 12rpx;
            margin-right: 10rpx;
            border-radius: 20rpx;
            border: 2rpx solid rgb(206, 120, 164);
            font-size: 24rpx;
          }
        }
        .age {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: #303133;
          .line {
            margin: 0 12rpx;
            width: 12rpx;
            height: 16rpx;
          }
        }
      }
    }
    .electrocardiogramImg {
      margin-top: 20rpx;
      font-size: 24rpx;
      padding: 10rpx 14rpx;
      color: rgb(102, 102, 102);
      background: rgb(253, 242, 250);
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      .img {
        width: 26rpx;
        margin-right: 10rpx;
      }
    }
  }
}
</style>
